import React,{useState,useEffect} from 'react'
import './index.css'
//引入水电的数据
import {getSD} from '../../request/index'
import * as echarts from 'echarts';
function RightTop() {
  //定义数据状态
  let [zhu,setZhu]=useState({})
  //接受数据
  useEffect(()=>{
    getSD().then(res=>{
      console.log('水电数据',res);
      setZhu(res.data.data.result[0])
      //echrts
      var chartDom = document.querySelector('.echarts')
      var myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid:{
          bottom:40,
          left:50//控制表的宽窄大小
        },
        legend: {
          textStyle:{
            color:'#fff'
          },
          icon:'circle',
          data: []
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['2012', '2013']
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0, // 设置Y轴的最小值
            max: 2000, // 设置Y轴的最大值
          }
        ],
        series: []
      };
      let newData=res.data.data.result[0]

      option.legend.data=newData.series.map((item)=>item.name)//文字标题
      option.xAxis[0].data=newData.yAxis.data//渲染X轴的文字
      console.log('文字',option.xAxis.data)
      option.series=newData.series//渲染所有数据 
      myChart.setOption(option);
    })
  },[])
  return (
    <div>
      <div className='shuid'>
        <div>水电用量……</div>
      </div>
      <div className='ds'>
        <div className='ds2'>
          <div>
            <i className='iconfont icon-shuidi1'></i>
            总用电量 72670
          </div>
          <div>
          <i className='iconfont icon-dianliangchi'  style={{color:'red'}}></i>
            总用电量 6987
          </div>
        </div>
        <div className='echarts'>
        
        </div>
      </div>
    </div>
  )
}

export default RightTop
